<template>
   <div class="more-item">
      <ul>
         <li  v-for="value in list" 
          :key='value.id' 
          :data-id="value.id"
          @click="handledata(value)" 
          :to="`/detail/${value.id}`"
         >
          <div>
           <img :src="value.verticalPic" alt="">  
             </div> 
             <div>
                <h3>{{value.name}}</h3>
                <p> {{value.venuecity}} / {{value.showtime}} / {{value.venue}}</p>
                <h4>{{value.price_str}}</h4>     
                </div> 
         </li>         
      </ul> 
   </div>
</template>

<script>
import {get} from  '../../utils/http.js' 
import BScroll from 'better-scroll'
import { Loading,Toast } from 'vant';
import Vue from 'vue'
Vue.use(Loading);
export default {
data () {
    return {
        list:[],
        id:''
   
    }
},
methods: { 
 handledata(value){
 let arr=[]
 arr.push(value)
  this.$router.push({
    path:`/detail/${value.id}`,
    query:{
      list2:arr
    } 
  })
   
 }
},
async  mounted () {
     let city='全国'
    let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=&ctl=演唱会&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`,
     
    })
//console.log(result);

     this.list=result.data.pageData.resultData
  let bScroll = new BScroll('.more-item', {
      pullUpLoad: true,
      click: true,
      probeType: 2
    })
      let page=1
    bScroll.on('pullingUp',async ()=>{
       page++
       if(page<result.data.pageData.maxPage){  
        let result = await get({
      url: `https://search.damai.cn/searchajax.html?keyword=&cty=&ctl=演唱会&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=${page}&tn=`,
     
    }) 
     this.list=[...this.list,...result.data.pageData.resultData]
      
     this.$nextTick(()=>{
         bScroll.refresh()
     })
   /* console.log(result.data.pageData.resultData)  */  
         bScroll.finishPullUp()
         }else{
             Toast.loading({
         message: '到底了。。。',
         forbidClick: true
})
         }
     
    })
  },



}
</script>

<style lang="stylus" scoped>
    .more-item
          padding 0.4rem  0.4rem  0  0.4rem
          width 100%
          overflow hidden
          height 100%
          background white
          ul
           width 100%
           overflow hidden
           li
            display flex
            flex-direction row 
            height 2.4rem
            width 100%
            margin-top 0.7rem
            >div:first-child
               font-size 0
               height 0
               padding-bottom  1.3296%              
               img 
                width 1.82rem
                height  2.42rem    
            >div:last-child
               position relative
               padding-left 0.24rem
               width 100%
               h3
                font-size 0.32rem
                width 90%            
               p
                overflow hidden              
                width  90%
                font-size 0.24rem
                color #aaaaaa
                padding-top 0.12rem         
                text-overflow ellipsis
                white-space nowrap
               h4
                font-size 0.28rem
                color #ff1268
                position absolute
                bottom 0.1rem
          
</style>